<form class="form-horizontal email-IDs-tab"
      ng-controller="EmailIDsController"
      ng-class="{'form-group-sm': $storage.displayDensity === pipelineConstant.DENSITY_COZY || $storage.displayDensity === pipelineConstant.DENSITY_COMPACT}"
      role="form" name="emailIDsForm">

  <div class="form-group">
    <label class="col-md-1 control-label" translate="home.detailPane.rulesTab.emailIds">Email IDs</label>
    <div class="controls col-lg-7 col-md-8">


      <div class="row map-list-type"
           ng-repeat="val in pipelineRules.emailIds track by $index">

        <div class="col-md-7">
          <input type="text" class="form-control input-sm"
                 required
                 name="{{'emailId' + $index}}"
                 ng-readonly="isPipelineRulesReadOnly"
                 ng-model="pipelineRules.emailIds[$index]"/>
        </div>

        <div class="col-md-4 btn-group" role="group" aria-label="Default button group"
             ng-if="!isPipelineRulesReadOnly">
          <button type="button" class="btn btn-default btn-sm"
                  ng-click="removeFromList(pipelineRules.emailIds, $index)">
            <i class="fa fa-minus pointer"></i>
          </button>
          <button type="button" class="btn btn-default btn-sm"
                  ng-show="$last"
                  ng-click="addToList(pipelineRules.emailIds)">
            <i class="fa fa-plus pointer"></i>
          </button>
        </div>

      </div>

      <div ng-if="pipelineRules.emailIds.length === 0 && !isPipelineRulesReadOnly" class="row">
        <div class="col-md-2 btn-group" role="group">
          <button type="button" class="btn btn-default btn-sm"
                  ng-click="addToList(pipelineRules.emailIds)">
            <i class="fa fa-plus pointer"></i>
          </button>
        </div>
      </div>

    </div>
  </div>

</form>